<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>

<body>
<!-- 轮播 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="../img/index-swiper-bg1.jpg" width="100%" height="200px">
    </div>
    <div class="swiper-slide">
      <img src="../img/index-swiper-bg2.jpg" width="100%" height="200px">
    </div>
    <div class="swiper-slide">
      <img src="../img/index-swiper-bg3.jpg" width="100%" height="200px">
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
</div>
<!-- 面板 -->
<div class="cotainer home-panel">
  <!-- 今日排名 &  累计打卡-->
  <div class="card dpflex mt16">
    <!-- 今日排名 -->
    <div class="rank">
      <h3 class="text">今日排名</h3>
      <p id="rankNum" class="colorfff">9</p>
    </div>
    <!-- 累计打卡 -->
    <div class="signin ml12">
      <h3>累计打卡 <span id="sumDays">--</span>天</h3>
      <div id="totalSign" class="total-sign mt16 fz16">今日打卡</div>
    </div>
  </div>
<!-- 运动数据 & 累计运动徽章 -->
<div class="card dpflex mt16">
  <!-- 运动数据 -->
  <div class="sport-data flex1">
    <h4 class="colorfff">运动数据 </h4>
  </div>
  <!-- 累计运动徽章 -->
  <div class="sum-badge flex1 ml12">
    <h4>累计运动徽章</h4>
    <div class="sumdiv fz18">
      <span id="sumBadge"></span>枚
    </div>
    
  </div>
</div>
   <!-- 课程训练 -->
   <div class="card dpflex mt16">
    <!-- 课程训练 -->
    <div class="course-training">
      <h4 class="colorfff">课程训练 </h4>
    </div>
  </div>
<!-- 户外跑步  -->
<div class="card dpflex mt16">
  <div class="outdoor-running">
    <h4 class="colorfff">户外跑步</h4>
  </div>
</div>

</body>

</html>